<!--
 * @Author: 吴世扬
 * @Date: 2023-03-10 16:53:56
 * @LastEditors: DESKTOP-05FP536\Administrator 18368095041@163.com
 * @LastEditTime: 2025-01-13 08:08:24
 * @FilePath: /grid-center-admin/src/views/common/iframe.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts">
export default {
    name: 'IframeView'
};
</script>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const url = ref('');
if (route.query && route.query.url) {
    url.value = decodeURI(route.query.url as string);
}
// const iframeRef = ref<HTMLIFrameElement | null>(null);
const init = () => {
    // window.addEventListener('message', throttleHandleMessage);
    window.onbeforeunload = () => {
        window.postMessage(
            {
                type: 'close'
            },
            '*'
        );
        // window.removeEventListener('message', throttleHandleMessage);
    };
};

// const handleMessage = (event: any) => {
//     console.log(event);
//     window.postMessage(event.data, '*');
// };

// const throttleHandleMessage = useThrottleFn(handleMessage, 100);

onMounted(() => {
    init();
});
console.log(url.value);
</script>

<template>
    <div class="iframe-view-container">
        <iframe v-if="url" ref="iframeRef" :src="url" frameborder="0"></iframe>
        <div v-else>缺少url参数</div>
    </div>
</template>

<style lang="scss" scoped>
.iframe-view-container {
    width: 100%;
    height: 100%;

    iframe {
        width: 100%;
        height: 100%;
    }
}
</style>
